<template>
  <a-card title="节点信息" size="small" class="property-panel" ref="propertyPanel" v-show="false">
    <a-form :form="form" :labalCol="{span:3}" size="small">
      <a-form-item label="节点ID" :hidden="true">
        <a-input v-model="form.id" v-show="false"></a-input>
      </a-form-item>
      <a-form-item label="节点名称">
        <a-input v-model="form.name" @change="nameChange" v-show="false"></a-input>
      </a-form-item>
      <!-- <a-form-item label="节点颜色">
        <a-color-picker v-model="form.color" @change="colorChange"></a-color-picker>
      </a-form-item>-->
      <!-- 任务节点允许选择人员 -->
      <a-form-item label="节点人员" v-if="userTask" v-show="false">
        <a-select v-model="form.userType" placeholder="请选择" @change="typeChange">
          <a-select-option value="assignee">指定人员</a-select-option>
          <a-select-option value="candidateUsers">候选人员</a-select-option>
          <a-select-option value="candidateGroups">角色/岗位</a-select-option>
        </a-select>
      </a-form-item>
      <!-- 指定人员 -->
      <a-form-item label="指定人员" v-if="userTask && form.userType === 'assignee'" v-show="false">
        <a-select
          v-model="form.assignee"
          placeholder="请选择"
          key="1"
          optionFilterProp="children"
          :showSearch="true"
          @change="(value) => addUser({assignee: value})"
        >
          <a-select-option v-for="item in users" :key="item.id" :value="item.id">{{item.username}}</a-select-option>
        </a-select>
      </a-form-item>
      <!-- 候选人员 -->
      <a-form-item label="候选人员" v-else-if="userTask && form.userType === 'candidateUsers'" v-show="false">
        <a-select
          v-model="form.candidateUsers"
          placeholder="请选择"
          key="2"
          mode="multiple"
          optionFilterProp="children"
          :showSearch="true"
          @change="(value) => addUser({candidateUsers: value.join(',') || value})"
        >
          <a-select-option v-for="item in users" :key="item.id" :value="item.id">{{item.username}}</a-select-option>
        </a-select>
      </a-form-item>
      <!-- 角色/岗位 -->
      <a-form-item label="角色/岗位" v-else-if="userTask && form.userType === 'candidateGroups'" v-show="false">
        <a-select
          v-model="form.candidateGroups"
          placeholder="请选择"
          key="3"
          optionFilterProp="children"
          :showSearch="true"
          @change="(value) => addUser({candidateGroups: value})"
        >
          <a-select-option v-for="item in roles" :key="item.id" :value="item.id">{{item.roleName}}</a-select-option>
        </a-select>
      </a-form-item>

      <!-- 团队名称-->
      <a-form-item label="团队名称" v-else-if="userTask && form.userType === 'teams'" v-show="false">
        <a-select
          v-model="form.candidateGroups"
          placeholder="请选择"
          key="4"
          optionFilterProp="children"
          :showSearch="true"
          @change="(value) => updateTeams({candidateGroups: value})"
        >
          <a-select-option v-for="item in teams" :key="item.id" :value="item.id">{{item.teamName}}</a-select-option>
        </a-select>
      </a-form-item>

      <!-- 团队名成员-->
      <a-form-item label="团队成员" v-if="userTask && form.userType === 'teams'" v-show="false">
        <a-select v-model="form.assignee" placeholder="请选择"
                  optionFilterProp="children"
                  key="5"
                  :showSearch="true"
                  @change="(value) =>updateTeamPlayers({assignee: value})"
        >
          <a-select-option v-for="(item,index) in teamPlayers" :key="index" :value="item">{{item}}
          </a-select-option>
        </a-select>
      </a-form-item>

      <!-- 定义输入输入格式-->
      <a-form-item label="输入格式" v-if="userTask" v-show="false">
        <a-select
          placeholder="请选择"
          key="2"
          mode="multiple"
          v-model="form.inputFormat"
          @change="(value) => addInputFormat({inputFormat: value.join(',') || value})"
        >
          <a-select-option v-for="item in fileFormat" :key="item" :value="item">{{item}}
          </a-select-option>
        </a-select>
      </a-form-item>

      <!-- 定义输入输出格式-->
      <a-form-item label="输出格式" v-if="userTask"  v-show="false">
        <a-select
          placeholder="请选择"
          key="2"
          mode="multiple"
          v-model="form.outputFormat"
          @change="(value) => addOutputFormat({outputFormat: value.join(',') || value})"
        >
          <a-select-option v-for="item in fileFormat" :key="item" :value="item">{{item}}
          </a-select-option>
        </a-select>
      </a-form-item>


      <!-- 分支允许添加条件 -->
      <a-form-item label="分支条件" v-if="sequenceFlow" v-show="false">
        <a-select v-model="form.user" placeholder="请选择">
          <a-select-option v-for="item in users" :key="item.id" :title="item.id">{{item.username}}</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
  import {getUserList, getRoleList} from '@/api/api'
  import {teamall, getTeamList} from '@/api/team'

  export default {
    name: 'PropertyPanel',
    props: {
      modeler: {
        type: Object,
        required: true
      }
    },
    computed: {
      userTask() {
        if (!this.element) {
          return
        }
        return this.element.type === 'bpmn:UserTask'
      },
      sequenceFlow() {
        if (!this.element) {
          return
        }
        return this.element.type === 'bpmn:SequenceFlow'
      }
    },
    data() {
      return {
        form: this.$form.createForm(this),
        model: {
          id: '',
          name: '',
          color: null
        },
        element: {},
        users: [],   //用户列表的数据
        roles: [],  //角色行列的数据
        teams: [],   //团队名称的数据
        teamPlayers: [],    //团队成员遍历团队名称，根据名称来显示此团队的成员
        fileFormat: ['.dll', '.txt', '.xlsx', '.docx', '.rar'],
        activityId: "",
        inputFileTypeArray: [],
        outputFileTypeArray: []
      }
    },
    mounted() {
      this.loadRoles()
      this.loadUsers()
      this.handleModeler()
      this.loadTeams()
    },
    methods: {
      initData() {
        this.loadRoles()
        this.loadUsers()
        this.loadTeams()
      },
      loadUsers() {
        const vm = this
        getUserList().then(res => {
          vm.users = [].concat(res.result.records)
        })
      },
      loadRoles() {
        const vm = this
        getRoleList().then(res => {
          vm.roles = [].concat(res.result.records)
        })
      },
      loadTeams() {
        const vm = this
        getTeamList().then(res => {
          vm.teams = [].concat(res.result.records)
        })
      },
      handleModeler() {
        // 监听节点选择变化
        this.modeler.on('selection.changed', this.selectionChanged)

        //  监听节点属性变化
        this.modeler.on('element.changed', this.elementChanged)
      },
      selectionChanged(e) {
        const element = e.newSelection[0]
        this.element = element
        if (!element) return
        this.form = {
          ...element.businessObject,
          ...element.businessObject.$attrs
        }
        if (this.form.userType === 'candidateUsers') {
          this.form['candidateUsers'] = this.form['candidateUsers'].split(',') || []
        }
        if (this.form.outputFormat != null) {
          this.form['outputFormat'] = this.form['outputFormat'].split(',') || []
        }
      },
      elementChanged(e) {
        const {element} = e
        this.activityId = element.id
        if (!element) return
        //  新增节点需要更新回属性面板
        if (element.id === this.form.id) {
          this.form.name = element.businessObject.name
          this.form = {...this.form}
        }

      },
      // 属性面板名称，更新回流程节点
      nameChange(e) {
        // let name = e.target.value
        let name = this.form.name
        const modeling = this.modeler.get("modeling");
        modeling.updateLabel(this.element, name);
      },

      //根据团队名称添加团队成员
      updateTeams(properties) {
        console.log("看一看是什么++++++"+this.form)
        let that = this;
        this.teams.forEach(function (item) {
          console.log("kanyika   :"+item.id)
          console.log("kanyika ++++++++++++  :"+properties.candidateGroups)
          if (item.id == properties.candidateGroups) {
            console.log("++++++++++++++" + item.teamName);   //输出的是团队名称
            that.teamPlayers = item.teamPlayer.split(",");

          }
        })
        /*    this.updateProperties(Object.assign({candidateGroups: properties.candidateGroups.teamName}, {
              userType: "candidateGroups"
            }))*/
        this.updateProperties(
          Object.assign(properties, {
            userType: Object.keys(properties)[0]
          })
        )
      },
      updateTeamPlayers(properties) {
        this.updateProperties(
          Object.assign(properties, {
            userType: Object.keys(properties)[0]
          })
        )
      },
      // 任务节点配置人员
      addUser(properties) {
        this.updateProperties(
          Object.assign(properties, {
            userType: Object.keys(properties)[0]
          })
        )
      },
      // 切换人员类型
      typeChange() {
        const types = ['assignee', 'candidateUsers', 'candidateGroups', 'teams']
        types.forEach(type => {
          delete this.element.businessObject.$attrs[type]
          delete this.form[type]
        })
      },
      // 在这里我们封装一个通用的更新节点属性的方法
      updateProperties(properties) {
        const modeling = this.modeler.get('modeling')
        modeling.updateProperties(this.element, properties)
      },
      addInputFormat(properties) {
        let that = this
        this.updateProperties({})
        Object.assign(properties, {activityId: that.activityId})

        let index = 0
        let bool = false
        that.inputFileTypeArray.forEach((val, key) => {
          if (val.activityId === that.activityId) {
            bool = true
            index = key
          }
        })

        if (bool) {
          that.inputFileTypeArray.splice(index, 1, properties)
        } else {
          that.inputFileTypeArray.push(properties)
        }

        this.$emit('inputFileType', that.inputFileTypeArray)
      },
      addOutputFormat(properties) {
        let that = this
        // this.updateProperties({})

        this.updateProperties(properties)

        Object.assign(properties, {activityId: that.activityId})

        let index = 0
        let bool = false
        that.outputFileTypeArray.forEach((val, key) => {
          if (val.activityId === that.activityId) {
            bool = true
            index = key
          }
        })

        if (bool) {
          that.outputFileTypeArray.splice(index, 1, properties)
        } else {
          that.outputFileTypeArray.push(properties)
        }
        this.$emit('outputFileType', that.outputFileTypeArray)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .property-panel {
    position: absolute;
    right: 10px;
    top: 80px;
    border-left: 1px solid #cccccc;
    padding: 20px 0;
    width: 150px;
    height: 200px;
  }
</style>
